<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-form ref="form" :inline="false" :model="form" label-width="80px" size="normal">
            <el-tabs type="card" value="first">
                <el-tab-pane label="基本信息" name="first">
                    <el-card shadow="nerver">
                        <el-form-item label="栏目类型">
                            <el-radio-group v-model="form.type">
                                <el-radio v-if="form.pid!==0" :label="1">普通栏目list(单个栏目标题+内容标题)</el-radio>
                                <el-radio v-if="form.pid==0" :label="2">封面栏目index(栏目及子栏目+子栏目标题+内容标题)</el-radio>
                                <el-radio :label="3">单文章(仅有内容)</el-radio>
                            </el-radio-group>
                            <hd-error name="type"/>
                        </el-form-item>
                        <el-form-item v-if="form.type <= 2" label="模型选择">
                            <el-select v-model="form.article_id" placeholder="请选择"
                                       style="width: 100%;">
                                <el-option v-for="article in articles" :key="article.id" :label="article.title"
                                           :value="article.id"></el-option>
                            </el-select>
                            <hd-error name="article_id"/>
                        </el-form-item>
                        <el-form-item v-if="form.type <= 2" label="父级栏目">
                            <el-select v-model="form.pid" placeholder="请选择" style="width: 100%;">
                                <el-option :value="0" label="顶级栏目"></el-option>
                                <el-option
                                    v-for="category in categories"
                                    :key="category.id"
                                    :disabled="disabled(category)"
                                    :label="category.title"
                                    :value="category.id"
                                >
                                    {{ '-'.repeat(category.level * 3) }}

                                    {{ category.title }}
                                    <span
                                        v-if="disabled(category)"
                                        style="float: right;
                                        font-size: 12px;color:red;">
                                         正在使用或为普通单栏目... </span>
                                </el-option>
                            </el-select>
                            <hd-error name="pid"/>
                        </el-form-item>
                        <el-form-item label="栏目名称">
                            <el-input v-model="form.title" clearable placeholder="" size="normal"></el-input>
                            <hd-error name="title"/>
                        </el-form-item>

                        <el-form-item v-if="form.type<=2 && form.pid!=0" label="呈列结构">
                            <el-radio-group v-model="form.structure">
                                <el-radio :label="1">4乘X圆图结构</el-radio>
                                <el-radio :label="2">3乘X文字结构</el-radio>
                                <el-radio :label="3">左图右4标题结构</el-radio>
                                <el-radio :label="4">3乘X相册结构</el-radio>
                            </el-radio-group>
                            <hd-error name="structure"/>
                        </el-form-item>
                        <el-form-item label="首页显示">
                            <el-switch
                                v-model="form.homeshow"
                                active-color="#13ce66"
                                active-text="显示"
                                inactive-color="#ff4949"
                                inactive-text="不显示">
                            </el-switch>
                            <hd-error name="structure"/>
                        </el-form-item>
                        <el-form-item label="英文标识">
                            <el-input v-model="form.name" clearable placeholder="" size="normal"></el-input>
                            <hd-error name="name"/>
                        </el-form-item>
                        <el-form-item label="置顶">
                            <el-switch
                                v-model="form.top"
                                active-color="#13ce66"
                                active-text="是"
                                inactive-color="#ff4949"
                                inactive-text="否">
                            </el-switch>

                            <hd-error name="top"/>
                        </el-form-item>
                        <el-form-item label="推荐">
                            <el-switch
                                v-model="form.recommended"
                                active-color="#13ce66"
                                active-text="是"
                                inactive-color="#ff4949"
                                inactive-text="否">
                            </el-switch>
                            <hd-error name="recommended"/>
                        </el-form-item>
                        <el-form-item v-if="form.type!=4" label="关键词">
                            <el-input v-model="form.keywords" clearable placeholder="" size="normal"></el-input>
                            <hd-error name="keywords"/>
                        </el-form-item>
                        <el-form-item v-if="form.type != 4" label="栏目简介">
                            <el-input v-model="form.description" clearable placeholder="" size="normal"
                                      type="textarea"></el-input>
                            <hd-error name="description"/>
                        </el-form-item>
                        <el-form-item label="栏目预览图">
                            <hd-image v-model="form.preview"></hd-image>
                            <hd-error name="preview"/>
                        </el-form-item>
                        <el-form-item v-if="form.type == 4" label="跳转链接">
                            <el-input v-model="form.url" clearable placeholder="" size="normal"></el-input>
                            <hd-error name="url"/>
                        </el-form-item>
                        <el-form-item v-if="form.type == 3" label="文章内容">
                            <hd-wangedit v-model="form.content"/>
                            <hd-error name="content"/>
                        </el-form-item>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="模板设置" name="second">
                    <el-card :body-style="{ padding: '20px' }" class="mb-5" shadow="always">
                        <div slot="header">
                            栏目模板
                        </div>
                        <el-form-item label="栏目内容">
                            <el-input v-model="form.category_template" clearable placeholder=""
                                      size="normal"></el-input>
                        </el-form-item>
                    </el-card>
                    <el-card :body-style="{ padding: '20px' }" shadow="always">
                        <div slot="header">
                            文章模板
                        </div>
                        <el-form-item label="封面模板">
                            <el-input v-model="form.index_template" clearable placeholder="" size="normal"></el-input>
                        </el-form-item>
                        <el-form-item label="列表模板">
                            <el-input v-model="form.list_template" clearable placeholder="" size="normal"></el-input>
                        </el-form-item>
                        <el-form-item label="内容页">
                            <el-input v-model="form.content_template" clearable placeholder="" size="normal"></el-input>
                        </el-form-item>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <div class="mt-3 ">
            <el-button class="d-block" type="primary" @click="onSubmit">提交</el-button>
        </div>
    </div>


</template>

<script>
const form = {
    title: '',
    pid: 0,
    article_id: null,
    path: '',
    type: 2,
    homeshow: true,
    top: false,
    recommended: false,
    structure: 1,
    category_template: 'category',
    index_template: 'index',
    list_template: 'list',
    content_template: 'content'
}
import tabs from './tabs'

export default {
    route: false,
    props: ['id'],
    data() {
        return {form: Object.assign({}, form), tabs, loading: true, articles: [], categories: []}
    },
    async created() {
        this.articles = await axios.get(`admin/article`)
        this.categories = await axios.get(`admin/category`)
        this.form.article_id = this.articles.length && this.articles[0].id
        if (this.id) {
            this.form = await axios.get(`admin/category/${this.id}`)
        }
    },
    methods: {
        //发表
        async onSubmit() {
            const url = this.id ? `admin/category/${this.id}` : 'admin/category'
            await axios[this.id ? 'put' : 'post'](url, this.form)
            this.$router.push({name: 'admin.category.index'})
        },
        disabled(category) {
            // category.path中搜索this.form.path字符串,category是父级
//当父级栏目的类型是单位章或者封面栏目时。不能添加子栏目
            // return (this.form.id && category.path.includes(this.form.path))
            return (category.type == 3 || category.path == this.form.path)
        }
    }
}
</script>

<style></style>
